<template>
  <a-spin :spinning="spinning">
    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="账户" name="painetBoxAccount" style="width: 300px;">
            <a-input style="width: 100%" placeholder="请输入账户" v-model:value="form.painetBoxAccount" />
          </a-form-item>
          <a-form-item label="AK" name="painetBoxAK" style="width: 300px;">
            <a-input style="width: 100%" placeholder="请输入AK" v-model:value="form.painetBoxAK" />
          </a-form-item>
          <a-form-item label="AS" name="painetBoxAS" style="width: 300px;">
            <a-input style="width: 100%" placeholder="请输入AS" v-model:value="form.painetBoxAS" />
          </a-form-item>
          <a-form-item label="接口地址" name="painetBoxServerUrl" style="width: 300px;">
            <a-input style="width: 100%" placeholder="请输入接口地址" v-model:value="form.painetBoxServerUrl" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联通单价/Gb" name="painetBoxCuccPrice" style="width: 300px;">
            <a-input-number style="width: 100%" placeholder="请输入联通单价" v-model:value="form.painetBoxCuccPrice" :min="0" />
          </a-form-item>
          <a-form-item label="电信单价/Gb" name="painetBoxCtccPrice" style="width: 300px;">
            <a-input-number style="width: 100%" placeholder="请输入电信单价" v-model:value="form.painetBoxCtccPrice" :min="0" />
          </a-form-item>
          <a-form-item label="移动单价/Gb" name="painetBoxCmccPrice" style="width: 300px;">
            <a-input-number style="width: 100%" placeholder="请输入移动单价" v-model:value="form.painetBoxCmccPrice" :min="0" />
          </a-form-item>
        </a-col>
      </a-row>
      
    </a-form>
    <div>
      <a-button style="margin-right: 8px" @click="reset">重置</a-button>
      <a-button type="primary" @click="onSubmit" :loading="loading">保存</a-button>
    </div>
  </a-spin>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import { configApi } from '/@/api/system/config-api';
import { smartSentry } from '/@/lib/smart-sentry';

// 加载中
const spinning = ref(false);

// 前缀
let prefix;

async function initValue(tabValue) {
  spinning.value = true; 
  let res = await configApi.getPainetBox();
  Object.assign(form, formDefault);
  if (res.data && !_.isEmpty(res.data)) {
    Object.assign(form, res.data);
  }
  nextTick(() => {
    formRef.value.clearValidate();
    prefix = tabValue;
    spinning.value = false;
  });
}

const formRef = ref();

const formDefault = {
  painetBoxAccount: undefined,
  painetBoxAK: undefined,
  painetBoxAS: undefined,
  painetBoxServerUrl: undefined,
  painetBoxCuccPrice: undefined,
  painetBoxCtccPrice: undefined,
  painetBoxCmccPrice: undefined,
}

let form = reactive(_.cloneDeep(formDefault));

const rules = {
  painetBoxAccount: [{ required: true, message: '账户必填' }],
  painetBoxAK: [{ required: true, message: 'AK必填' }],
  painetBoxAS: [{ required: true, message: 'AS必填' }],
  painetBoxServerUrl: [{ required: true, message: '接口地址必填' }],
  painetBoxCuccPrice: [{ required: true, message: '联通单价必填' }],
  painetBoxCtccPrice: [{ required: true, message: '联通单价必填' }],
  painetBoxCmccPrice: [{ required: true, message: '联通单价必填' }],
};

// 保存按钮加载
const loading = ref(false);

// 点击确定，验证表单
async function onSubmit() {
  // 加载中
  loading.value = true;
  try {
    await formRef.value.validateFields();
    save();
  } catch (err) {
    message.error('参数验证错误，请仔细填写表单数据!');
    // 取消加载中
    loading.value = false;
  }
}

// 保存
async function save() {
  try {
    await configApi.saveConfig(prefix, form);
    message.success('操作成功');
    emits('reloadList');
    onClose();
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    // 取消加载中
    loading.value = false;
  }
}

// 重置
function reset() {
  Object.assign(form, formDefault);
}

defineExpose({
  initValue,
});

</script>
